<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48'>
			<view class="slot-wrap">
				<image class="icon" src="../../../../static/imgs/sousuohui@3x.png" mode=""></image>
				<input type="text" v-model="keyword" placeholder="搜一搜你想去的地方"
					placeholder-style="color:#AAAAAA;font-size:28rpx" confirm-type="search" @confirm="searchFn" />
			</view>
		</u-navbar>
		<view class="tab-bar" :style="{top: statusHeight +'px'}">
			<view class="tabBox">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="changeTab"
					inactive-color='#888888' active-color="#333333" bar-width='60' bar-height="8" :bar-style='barStyle'
					:active-item-style='itemStyle'></u-tabs>
			</view>
			<view class="filter" @click="filtPop = true">
				<text>筛选</text>
				<image src="../../../../static/imgs/shaixuan.png" mode=""></image>
			</view>
		</view>

		<view class="main" v-show="current==0">
			<u-waterfall v-model="alllList" ref="allWaterfall">
				<template v-slot:left="{leftList}">
					<view v-for="(item, index) in leftList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
								v-if="item.type == 1">
								体验游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
								v-if="item.type == 2">
								品质游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
								v-if="item.type == 3">
								尊享游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- <view v-else>
									<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
								</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<!-- <view class="rel-price" v-else>
										¥<text>{{Number(item.vip_price)-Number(item.use_welfare_fund)}}</text>
									</view> -->
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view v-for="(item, index) in rightList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
								v-if="item.type == 1">
								体验游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
								v-if="item.type == 2">
								品质游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
								v-if="item.type == 3">
								尊享游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- <view v-else>
									<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
								</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<!-- 	<view class="rel-price" v-else>
										¥<text>{{Number(item.vip_price)-Number(item.use_welfare_fund)}}</text>
									</view> -->
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>

		<view class="main" v-show="current==1">
			<u-waterfall v-model="travelList" ref="gnWaterfall">
				<template v-slot:left="{leftList}">
					<view v-for="(item, index) in leftList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
								v-if="item.type == 1">
								体验游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
								v-if="item.type == 2">
								品质游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
								v-if="item.type == 3">
								尊享游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- <view v-else>
									<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
								</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<!-- <view class="rel-price" v-else>
										¥<text>{{Number(item.vip_price)-Number(item.use_welfare_fund)}}</text>
									</view> -->
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view v-for="(item, index) in rightList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
								v-if="item.type == 1">
								体验游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
								v-if="item.type == 2">
								品质游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
								v-if="item.type == 3">
								尊享游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- <view v-else>
									<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
								</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<!-- 	<view class="rel-price" v-else>
										¥<text>{{Number(item.vip_price)-Number(item.use_welfare_fund)}}</text>
									</view> -->
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>

		<view class="main" v-show="current==2">
			<u-waterfall v-model="cjtravelList" ref="cjWaterfall">
				<template v-slot:left="{leftList}">
					<view v-for="(item, index) in leftList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
								v-if="item.type == 1">
								体验游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
								v-if="item.type == 2">
								品质游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
								v-if="item.type == 3">
								尊享游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- 	<view v-else>
										<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
									</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view v-for="(item, index) in rightList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#E699FD,#EA54D8);"
								v-if="item.type == 1">
								体验游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#FCB352,#FF7700);"
								v-if="item.type == 2">
								品质游
							</view>
							<view class="type" style="background:linear-gradient(90deg,#008FFF,#00FED0);"
								v-if="item.type == 3">
								尊享游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- <view v-else>
										<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
									</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>

		<view class="main" v-show="current==3">
			<u-waterfall v-model="zbtravelList" ref="zbWaterfall">
				<template v-slot:left="{leftList}">
					<view v-for="(item, index) in leftList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#FEE16F,#FFA80D);">
								周边游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- 	<view v-else>
										<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
									</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view v-for="(item, index) in rightList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#FEE16F,#FFA80D);">
								周边游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price" v-if="item.type != 1">
								<view>
									<text style="font-size: 24rpx;">¥</text>{{item.price}}
								</view>
								<!-- <view v-else>
										<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
									</view> -->
							</view>
							<view class="price-box">
								<view v-if="item.type != 1" style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
									</view>
									<view class="fl-price">
										+ {{item.use_welfare_fund}}福利金
									</view>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<view class="rel-price">
										¥<text>{{item.vip_price}}</text>
									</view>
									<view class="fl-price">
										可福利金抵扣
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>

		<u-popup v-model="filtPop" mode="top">
			<view class="popBox">
				<view class="lable">
					价格区间
				</view>
				<view class="price">
					<input v-model="lowPrice" type="text" placeholder="最低价" />
					<text>-</text>
					<input v-model="highPrice" type="text" placeholder="最高价" />
				</view>
				<view class="lable">
					出行天数
				</view>
				<view class="days">
					<input v-model="days" type="text" placeholder="出行天数" />
				</view>
				<view class="btns">
					<view class="reset" @click="reset">
						重置
					</view>
					<view class="comfirm" @click="filtComfirm">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				lowPrice: '',
				highPrice: '',
				days: '',
				filtPop: false,
				tabList: [{
						name: '全部'
					},
					{
						name: '国内游'
					},
					{
						name: '出境游'
					},
					{
						name: '周边游'
					},
				],
				barStyle: {
					background: 'linear-gradient(180deg, #93B9F9 0%, #2D7AFE 100%)',
				},
				itemStyle: {
					'font-size': '32rpx',
					'font-weight': 'bold',
				},
				keyword: '',
				page: '1', // 页码
				type: '', //类型
				current: 0,
				categoryType: 0, // 国内游和出境游
				travelList: [],
				cjtravelList: [],
				zbtravelList: [],
				alllList: [],
				statusHeight: 0
			}
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.statusHeight = res.statusBarHeight + 44
				}
			})
		},
		onLoad(option) {
			this.type = option.type
			this.keyword = option.keyword
			this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
		},
		methods: {
			reset() {
				this.lowPrice = '',
					this.highPrice = '',
					this.days = ''
			},
			filtComfirm() {
				this.page = '1'
				this.$refs.gnWaterfall.clear()
				this.$refs.cjWaterfall.clear()
				this.$refs.allWaterfall.clear()
				this.$refs.zbWaterfall.clear()
				this.filtPop = false
				this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
			},
			// 搜索
			searchFn() {
				this.page = '1'
				this.$refs.gnWaterfall.clear()
				this.$refs.cjWaterfall.clear()
				this.$refs.allWaterfall.clear()
				this.$refs.zbWaterfall.clear()
				this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
			},
			// tab切换
			changeTab(e) {
				this.current = e
				this.page = '1'
				this.$refs.gnWaterfall.clear()
				this.$refs.cjWaterfall.clear()
				this.$refs.allWaterfall.clear()
				this.$refs.zbWaterfall.clear()
				if (this.current == 0) {
					this.categoryType = 0
					this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
				}
				if (this.current == 1) {
					this.categoryType = 2
					this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
				}
				if (this.current == 2) {
					this.categoryType = 4
					this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
				}
				if (this.current == 3) {
					this.categoryType = 3
					this.getTravelList(this.keyword, this.lowPrice, this.highPrice, this.days)
				}
			},
			// 匹配对应旅游路线
			async getTravelList(keyword, minPrice, maxPrice, days) {
				let {
					page,
					categoryType,
					type
				} = this
				let res = await myRequest.getTravel({
					page: page,
					num: '10',
					type: type ? type : '',
					category_type: categoryType.toString(),
					keyword: keyword ? keyword : '',
					min_price: minPrice ? minPrice : '',
					max_price: maxPrice ? maxPrice : '',
					days: days ? days : ''
				})
				if (res.status) {
					if (this.current == 0) {
						this.alllList = [...this.alllList, ...res.data]
					}
					if (this.current == 1) {
						this.travelList = [...this.travelList, ...res.data]
					}
					if (this.current == 2) {
						this.cjtravelList = [...this.cjtravelList, ...res.data]
					}
					if (this.current == 3) {
						this.zbtravelList = [...this.zbtravelList, ...res.data]
					}
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F2F2F7;
	}
</style>
<style lang="scss" scoped>
	.slot-wrap {
		margin-left: 30rpx;
		width: 582rpx;
		height: 64rpx;
		background: #EEEEEE;
		border-radius: 18px;
		display: flex;
		align-items: center;
		padding-left: 38rpx;

		input {
			font-size: 28rpx;
		}

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
	}

	.tab-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		background-color: #FFFFFF;
		position: sticky;
		z-index: 99;

		.tabBox {
			width: 70%;
		}

		.filter {
			padding-right: 40rpx;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			text {
				margin-right: 12rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular;
				color: #888888;
			}
		}
	}

	.main {
		padding: 0 15rpx;

		.shopitem {
			background-color: #FFFFFF;
			padding-bottom: 20rpx;
			width: 348rpx;
			height: auto;
			overflow: hidden;
			border-radius: 16rpx;
			margin: 20rpx auto 0;
			position: relative;

			.type {
				width: 108rpx;
				height: 40rpx;
				border-radius: 16rpx 0px 16rpx 0px;
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}

			image {
				width: 348rpx;
				height: 348rpx;
			}

			.title {
				padding: 0 10rpx;
				font-size: 30rpx;
				font-family: Segoe UI;
				color: #333333;
				margin-top: 10rpx;
				overflow: hidden;
			}

			.price {
				padding-left: 10rpx;
				font-size: 36rpx;
				font-family: Arial;
				font-weight: 400;
				color: #FF4600;
				margin-top: 10rpx;
				text-decoration: line-through
			}

			.price-box {
				padding-left: 10rpx;
				width: fit-content;
				width: -webkit-fit-content;
				width: -moz-fit-content;
				display: flex;
				margin-top: 12rpx;

				.rel-price {
					height: 44rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
					border-radius: 8rpx 0px 0px 8rpx;
					padding: 0 6rpx;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					line-height: 44rpx;
					color: #333333;

					text {
						font-size: 32rpx;
						font-weight: bold;
						margin-left: 4rpx;
					}
				}

				.fl-price {
					height: 44rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					background: #333333;
					border-radius: 0px 8rpx 8rpx 0px;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					color: #FBE8B8;
					line-height: 44rpx;
					padding: 0 6rpx;
				}
			}
		}
	}

	.popBox {
		.lable {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			font-family: PingFang HK;
			font-weight: 400;
			color: #333333;
			padding-left: 40rpx;
		}

		.price,
		.days {
			display: flex;
			align-items: center;
			padding-left: 40rpx;

			input {
				width: 280rpx;
				height: 64rpx;
				background: #EEEEEE;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFang HK;
				font-weight: 400;
				color: #AAAAAA;
				text-indent: 98rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang HK;
				font-weight: 400;
				color: #999999;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 48rpx;
			margin-bottom: 18rpx;

			.reset {
				width: 340rpx;
				height: 64rpx;
				background: #FFFFFF;
				border: 2rpx solid rgba(153, 153, 153, 0.4980392156862745);
				border-radius: 4px;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 64rpx;
				color: #333333;
				text-align: center;
			}

			.comfirm {
				width: 340rpx;
				height: 64rpx;
				background: #3587F7;
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 64rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
